<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>英语练习系统</title>
  <link rel="stylesheet" type="text/css" href="/css/practise.css">
  <script src="/js/practise.js"></script>
</head>
<body>
<input type="hidden" id="userId" th:value="${session.user.id}">
<input type="hidden" id="username" th:value="${session.user.username}">
<nav class="navbar">
  <div class="logo">英语练习系统</div>
  <div class="nav-links">
    <span th:text="'欢迎您，' + ${session.user.username} + '同学！'"></span>
    <a href="wrong_questions">我的错题</a>
    <a href="login">退出登录</a>
  </div>
</nav>

<!-- 左侧导航栏 -->
<div class="sidebar">
  <div class="sidebar-header">
    <h3>考试分类</h3>
  </div>

  <!-- 分类导航 -->
  <div class="nav-item nav-category active" onclick="selectExam('CET4')">
    <div>
      <h3>CET4</h3>
      <p>大学英语四级</p>
    </div>
  </div>
  <div class="nav-item nav-category" onclick="selectExam('CET6')">
    <div>
      <h3>CET6</h3>
      <p>大学英语六级</p>
    </div>
  </div>
  <div class="nav-item nav-category" onclick="selectExam('PE')">
    <div>
      <h3>PE</h3>
      <p>考研英语</p>
    </div>
  </div>
</div>

<!-- 主内容区 -->
<div class="main-content">
  <!-- 初始显示练习类型选择 -->
  <div id="practice-type-selection" class="question-container">
    <h2 class="section-title" id="exam-title">选择练习类型</h2>
    <div class="exercise-options">
      <div class="exercise-card" onclick="selectPracticeType('reading')">
        <h3>阅读理解</h3>
        <p>练习各种阅读题型，提高阅读速度和理解能力</p>
      </div>
      <div class="exercise-card" onclick="selectPracticeType('writing')">
        <h3>写作练习</h3>
        <p>提供各种写作题目，提升英语写作水平</p>
      </div>
      <div class="exercise-card" onclick="selectPracticeType('translation')">
        <h3>翻译练习</h3>
        <p>中英互译练习，提高翻译准确性和流畅度</p>
      </div>
    </div>
  </div>

  <!-- 选择练习模式页面 (初始隐藏) -->
  <div id="practice-mode-selection" class="question-container" style="display: none;">
    <h2 class="section-title" id="practice-title">选择练习模式</h2>
    <div class="exercise-options">
      <div class="exercise-card" onclick="startPractice('sequential')">
        <h3>顺序练习</h3>
        <p>按照题目难度逐步进行练习，适合系统性学习</p>
      </div>
      <div class="exercise-card" onclick="startPractice('random')">
        <h3>随机练习</h3>
        <p>随机抽取题目练习，适合检测综合能力</p>
      </div>
    </div>
  </div>

  <!-- 实际练习页面 (初始隐藏) -->
  <div id="practice-screen" class="question-container" style="display: none;">
    <h2 class="section-title" id="current-practice-title">正在练习</h2>
    <div id="practice-content">
      <!-- 这里会动态生成练习内容 -->
      <div class="loader"></div>
    </div>
    <button class="submit-btn" onclick="checkAnswer()">提交答案</button>
  </div>

  <!-- 随机试题展示 (初始隐藏) -->
  <div id="random-questions" class="question-container" style="display: none;">
    <h2 class="section-title">随机试题练习</h2>
    <div class="question-types">
      <button class="type-btn active" onclick="showRandomQuestions('all')">全部</button>
      <button class="type-btn" onclick="showRandomQuestions('reading')">阅读</button>
      <button class="type-btn" onclick="showRandomQuestions('writing')">写作</button>
      <button class="type-btn" onclick="showRandomQuestions('translation')">翻译</button>
    </div>

    <div id="questions-display">
      <!-- 这里会动态生成随机试题 -->
      <div class="loader"></div>
    </div>
  </div>
</div>

</body>
</html>